import useMappingProps from 't/common/hooks/useMappingProps';
// 钩子方法
import { useQuasar } from '@teld/q-components';
import { commonProps, createNameSpace } from 't/common/utils';
import { defineComponent, computed } from 'vue';
import LabelPrefixWraper from '../label-prefix-wraper';
import './index.scss';

export default defineComponent({
  name: createNameSpace('link'),
  props: {
    ...commonProps,
    ...LabelPrefixWraper.props,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
    isShowUnderline: Boolean,
    isShowUnderlineHover: Boolean,
    isLinkTargetBlank: Boolean,
    href: String,
    hrefExp: String,
    linkName: {
      type: String,
      default() {
        return '';
      },
    },
    hrefType: {
      type: String,
      default() {
        return ['const', 'expression'][0];
      },
    },
    labelPosition: {
      type: String,
      default: 'top',
    },
    tabIndex: '1',
  },
  emits: ['change'],

  setup(props, { attrs, emit, expose, slots }) {
    const [mappingProps, mappingExpose] = useMappingProps(props);

    expose(mappingExpose);

    const $q = useQuasar();
    // 设备是否是移动设备 isMobile
    const isMobile = computed(() => $q.screen.xs || $q.platform.is.mobile);

    // ============================= label 位置  ===========================
    const labelPosition = computed(() => {
      if (isMobile.value) {
        return 'top';
      }
      return mappingProps.labelPosition;
    });
    const href = computed(() => {
      if (mappingProps.href && mappingProps.hrefType === 'const') {
        return mappingProps.href;
      } else if (
        mappingProps.hrefExp &&
        mappingProps.hrefType === 'expression'
      ) {
        return mappingProps.hrefExp;
      }
      return undefined;
    });

    return () => {
      return (
        <div
          class={[
            'tr-link',
            {
              'z-vertical':
                labelPosition.value == 'top' && !mappingProps.hideLabel,
              'z-mobile': isMobile.value,
            },
          ]}
          tabIndex='-1'
          v-show={mappingProps.visible}
        >
          <LabelPrefixWraper
            label={mappingProps.label}
            labelProps={{ class: 'label-title' }}
            hideLabel={mappingProps.hideLabel}
            labelPosition={labelPosition.value}
            helpConf={mappingProps.helpConf}
            helpTooltip={mappingProps.helpTooltip}
            helpPlacement={mappingProps.helpPlacement}
            helpMore={mappingProps.helpMore}
            helpMorePopup={mappingProps.helpMorePopup}
            helpMoreLink={mappingProps.helpMoreLink}
            helpMoreLinkHrefStatic={mappingProps.helpMoreLinkHrefStatic}
            helpMoreLinkHrefExp={mappingProps.helpMoreLinkHrefExp}
            required={mappingProps.required}
            tabindex='-1'
          ></LabelPrefixWraper>

          <div className='link-text'>
            <a
              class='text-decoration-default'
              class={[
                mappingProps.isShowUnderline && 'text-decoration-underline',
                labelPosition.value == 'top' && 'text-decoration-top',
                mappingProps.isShowUnderlineHover &&
                  'text-decoration-underline-hover',
              ]}
              href={href.value}
              tabIndex={mappingProps.tabIndex}
              target={mappingProps.isLinkTargetBlank ? '_block' : '_self'}
            >
              {mappingProps.linkName}
            </a>
          </div>
        </div>
      );
    };
  },
});
